<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="上级菜单">
        <el-select v-model="form.Pid" placeholder="请选择">
          <el-option :value="0" label="请选择"></el-option>
          <el-option
            v-for="item in PerList"
            :key="item.Id"
            :label="item.Name"
            :value="item.Id"
          >
          </el-option>
        </el-select>
        默认是最高级
      </el-form-item>
      <el-form-item label="菜单名称">
        <el-input v-model="form.Name"></el-input>
      </el-form-item>
      <el-form-item label="菜单URL">
        <el-input v-model="form.URL"></el-input>
      </el-form-item>
      <el-form-item label="按钮分配">
        <el-checkbox-group v-model="checkList">
          <el-checkbox
            v-for="(item, index) in ButtonList"
            :key="index"
            :label="item.value"
          >
            {{ item.text }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">修改</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    PerId: null, 
  },
  data() {
    return {
      checkList: [],
      ButtonList: [
        { text: "查询", value: "Search" },
        { text: "新建", value: "Add" },
        { text: "删除", value: "Delete" },
        { text: "编辑", value: "Update" },
        { text: "导入", value: "Import" },
        { text: "导出", value: "Export" },
        { text: "上传", value: "Upload" },
        { text: "审核", value: "Audit" },
      ],
      PerList: [],
      form: {
        Pid: 0,
      },
      PerCheck: [],
    };
  },
  created() {
    this.GetPermission();
    this.GetPermissionById();
  },
  methods: {
    onSubmit() {
      this.form.buttonJson = this.checkList.toString();
      this.axios
        .put("http://localhost:5255/api/Permission/UpdatePermission", this.form)
        .then((res) => {
          if (res.data.Success) {
            this.$message.success(res.data.ErrorInfo);
            this.GetPermission();
            this.$emit("ClosePerUpd");
          } else {
            this.$message.error(res.data.ErrorInfo);
          }
        });
    },
    GetPermission() {
      this.axios
        .get("http://localhost:5255/api/Permission/GetPermissionMax")
        .then((res) => {
          this.PerList = res.data.Data;
        });
    },
    GetPermissionById() {
      this.axios
        .get(
          "http://localhost:5255/api/Permission/GetPermissionById?Id=" +
            this.PerId
        )
        .then((res) => {
          this.checkList = res.data.Data.ButtonJson.split(",");
          this.form = res.data.Data;
        });
    },
  },
};
</script>

<style>
</style>